<template>
  <div class="big">
    <!-- 最上部导航栏 -->
    <div class="nav">
      <van-nav-bar title="影院" left-arrow fixed @click-left="onClickLeft">
        <template #left>
          {{ cityName }} <van-icon name="arrow-down" color="#ccc" />
        </template>
      </van-nav-bar>
    </div>

    <div class="menu">
      <van-dropdown-menu active-color="#ff661f" duration="0.1">
        <div class="city">
          <van-dropdown-item
            v-model="value1"
            :options="option1"
            @change="changeArea"
          />
        </div>
        <van-dropdown-item
          v-model="value2"
          :options="option2"
          @change="changeDui"
        />
        <van-dropdown-item v-model="value3" :options="option3" />
      </van-dropdown-menu>
    </div>

    <div class="content">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onload"
        v-show="city"
      >
        <div class="list" v-for="cin in cinema" :key="cin.cinemaId">
          <van-card @click="cinemaMsg(cin.cinemaId)">
            <template #title>
              <div class="msg">
                <div class="text">
                  <p class="title">{{ cin.name }}</p>
                  <p class="duipiao" v-show="duipiao">2D通兑票|3D兑票</p>
                  <p class="add">{{ cin.address }}</p>
                </div>
                <div class="smallText">
                  <van-icon name="location-o" size="20" v-show="duipiao" />
                  <p class="price" v-show="!duipiao">
                    ￥{{ cin.lowPrice | toFixed(2) }}起
                  </p>
                  <p class="long">距离位置</p>
                </div>
              </div>
            </template>
          </van-card>
        </div>
      </van-list>
    </div>

    <div class="con">
      <div
        class="list"
        v-for="cin in changeCity"
        :key="cin.cinemaId"
        v-show="!city"
      >
        <van-card @click="cinemaMsg(cin.cinemaId)">
          <template #title>
            <div class="msg">
              <div class="text">
                <p class="title">{{ cin.name }}</p>
                <p class="duipiao" v-show="duipiao">2D通兑票|3D兑票</p>
                <p class="add">{{ cin.address }}</p>
              </div>
              <div class="smallText">
                <van-icon name="location-o" size="20" v-show="duipiao" />
                <p class="price">￥{{ cin.lowPrice | toFixed(2) }}起</p>
                <p class="long">距离位置</p>
              </div>
            </div>
          </template>
        </van-card>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import {
  Icon,
  Tab,
  Tabs,
  NavBar,
  DropdownMenu,
  DropdownItem,
  List,
  Card,
} from "vant";
import {
  getCityCinemas,
  getCityAreas,
  getCityById,
  getAreaCinema,
} from "@/request/request";

Vue.use(DropdownMenu);
Vue.use(DropdownItem);
Vue.use(List);
Vue.use(Card);
Vue.use(Tab);
Vue.use(Tabs);
Vue.use(NavBar);
Vue.use(Icon);

export default {
  created() {
    this.cityName = this.$store.state.city;
    this.cityId = this.$store.state.cityId;
    getCityAreas(this.cityId).then((res) => {
      this.total = res;
      getCityById(this.cityId, res).then((data) => {
        data.unshift({ text: "全城", value: 0 });
        this.option1 = data;
      });
    });
  },
  filters: {
    toFixed(data, n) {
      return String(data).substr(0, n);
    },
  },
  data() {
    return {
      city: true,
      changeCity: [],
      total: 0,
      duipiao: false,
      loading: false,
      finished: false,
      cityId: "",
      pageNum: 1,
      cityName: "",
      active: 0,
      value1: 0,
      value2: 0,
      value3: 0,
      area: [],
      cinema: [],
      option1: [],
      option2: [
        { text: "APP订票", value: 0 },
        { text: "前台兑换", value: 1 },
      ],
      option3: [
        { text: "最近去过", value: 0 },
        { text: "离我最近", value: 1 },
      ],
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push("/city");
    },
    onConfirm() {
      this.$refs.item.toggle();
    },
    onload() {
      this.cityName = this.$store.state.city;
      this.cityId = this.$store.state.cityId;
      getCityCinemas(this.cityId, this.pageNum).then((da) => {
        if (da.status === 0 && da.msg === "ok") {
          let total = da.data.total;
          if (this.cinema.length >= total) {
            this.pageNum = 1;
            this.finished = true;
            // return
          } else {
            this.cinema.push(...da.data.cinemas);
            this.pageNum += 1;
          }
          this.loading = false;
        }
      });
    },
    changeArea(value) {
      if (value === 0) {
        this.city = true;
        return;
      }
      this.city = false;

      let area = "";
      this.option1.forEach((item) => {
        item.value == value;
        if (item.value === value) {
          area = item.text;
        }
      });
      getAreaCinema(this.cityId, this.total, area).then((res) => {
        this.changeCity = res;
      });
    },
    changeDui(value) {
      if (value === 1) {
        this.duipiao = true;
      } else {
        this.duipiao = false;
      }
    },
    cinemaMsg(id) {
      this.$router.push({ path: "/cinema/film", query: { id } });
    },
  },
  watch: {},
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.big {
  height: 100%;
  position: relative;
  background-color: #fff;
}
.nav {
  overflow: hidden;
  height: 46px;
  position: fixed;
  width: 100%;
  z-index: 99999;
}
.menu {
  position: fixed;
  top: 46px;
  left: 0;
  width: 100%;
  .van-dropdown-menu {
    position: fixed;
    top: 46px;
    left: 0;
    width: 100%;
  }
  .van-cell__title,
  .van-cell__value span {
    display: inline-block;
  }
  .van-popup {
    height: 100%;
  }
}
.menu[data-v-a43d2f2a] {
  z-index: 99;
}
.van-list {
  background-color: #fff;
  position: absolute;
  width: 100%;
  z-index: 1;
  margin-top: 96px;
  ::v-deep .van-list__placeholder {
    height: 50px;
  }
}
.msg {
  background-color: #fff;

  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px;
  .smallText {
    text-align: center;
  }
  .title {
    color: #191a1b;
    font-size: 15px;
  }
  .duipiao {
    color: #797d82;
    font-size: 12px;
    margin-top: 10px;
  }
  .add {
    color: #797d82;
    font-size: 12px;
    margin-top: 10px;
  }
  .price {
    color: #ff5f16;
    font-size: 15px;
  }
  .long {
    color: #797d82;
    font-size: 12px;
    margin-top: 10px;
  }
}
.menu {
  margin-top: 46px;
  position: fixed;
  top: 0;
  width: 100%;
  left: 0;
  .city ::v-deep .van-popup--top {
    // width: 50%;
    // display: flex;
    display: inline-block;
    width: 100%;
    height: 500px;
  }
}
</style>
